<template>
  <!-- 头部 -->
  <el-breadcrumb :separator-icon="ArrowRight">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>商品管理</el-breadcrumb-item>
    <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    <el-breadcrumb-item>添加商品</el-breadcrumb-item>
  </el-breadcrumb>
  <!-- 卡片 -->
  <el-card class="box-card">
    <el-form ref="ruleFormRef"
             :model="AddForm"
             :rules="rules"
             label-width="100px"
             class="demo-ruleForm"
             :size="formSize"
             status-icon>
      <!-- 1 -->
      <el-row class="row">
        <el-col :span="12">
          <!-- 商品名称 -->
          <el-form-item label="商品名称"
                        prop="goods_name">
            <el-input v-model="AddForm.goods_name"
                      placeholder="请输入商品名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <!-- 商品库存 -->
          <el-form-item label="商品库存"
                        prop="goods_num">
            <el-input v-model="AddForm.goods_num"
                      placeholder="请输入商品库存" />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 2 -->
      <el-row class="row">
        <el-col :span="12">
          <!-- 商品原价 -->
          <el-form-item label="商品原价"
                        prop="goods_price">
            <el-input v-model="AddForm.goods_price"
                      placeholder="请输入商品原价" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <!-- 商品折扣价 -->
          <el-form-item label="商品折扣价"
                        prop="discount_price">
            <el-input v-model="AddForm.discount_price"
                      placeholder="请输入商品折扣价" />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 3 -->
      <el-row class="row">
        <el-col :span="8">
          <!-- 添加颜色 -->
          <el-form-item label="商品颜色"
                        prop="goods_colour">
            <el-select v-model="AddForm.goods_colour"
                       placeholder="选择商品的颜色">
              <el-option label=""
                         value="" />
              <el-option label="褐色"
                         value="褐色" />
              <el-option label="银色"
                         value="银色" />
              <el-option label="金色"
                         value="金色" />
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 商品分类 -->
        <el-col :span="8">
          <el-form-item label="商品分类"
                        prop="goods_pid">
            <el-cascader :options="options"
                         :props="cascaderProps"
                         v-model="AddForm.goods_pid"
                         clearable>
            </el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <!-- 商品尺寸 -->
          <el-form-item label="商品尺寸"
                        prop="goods_size">
            <el-input v-model="AddForm.goods_size"
                      placeholder="请输入商品尺寸，用 | 隔开" />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 4 -->
      <el-row class="row px-6">
        <!-- 上传单张展示图 -->
        <el-col :span="24">
          <span class="ScImg">上传单张展示图</span>
          <el-upload action="#"
                     list-type="picture-card"
                     :on-preview="handlePictureCardPreview"
                     multiple
                     :limit="1"
                     :http-request="AddImages">
            <el-icon>
              <Plus />
            </el-icon>
          </el-upload>

          <el-dialog v-model="dialogVisible">
            <img w-full
                 :src="dialogImageUrl"
                 alt="Preview Image" />
          </el-dialog>
        </el-col>
      </el-row>
      <!-- 5 -->
      <el-row class="row px-6">
        <!-- 上传单张展示图 -->
        <el-col :span="24">
          <span class="ScImg">上传图片展示图</span>
          <el-upload action="#"
                     list-type="picture-card"
                     :on-preview="handlePictureCardPreview"
                     multiple
                     :http-request="AddImagess">
            <el-icon>
              <Plus />
            </el-icon>
          </el-upload>

          <el-dialog v-model="dialogVisible">
            <img w-full
                 :src="dialogImageUrl"
                 alt="Preview Image" />
          </el-dialog>
        </el-col>
      </el-row>
      <!-- 6 -->
      <el-row class="row px-6">
        <!-- 上传单张展示图 -->
        <el-col :span="24">
          <span class="ScImg">上传图片的URL</span>
          <el-upload action="#"
                     list-type="picture-card"
                     :on-preview="handlePictureCardPreview"
                     multiple
                     :http-request="AddImagesss">
            <el-icon>
              <Plus />
            </el-icon>
          </el-upload>

          <el-dialog v-model="dialogVisible">
            <img w-full
                 :src="dialogImageUrl"
                 alt="Preview Image" />
          </el-dialog>
        </el-col>
      </el-row>
      <!-- 添加按钮 -->
      <el-form-item class="py-4">
        <el-button type="primary"
                   size="large"
                   class="item"
                   @click="submitForm(ruleFormRef)">添加商品</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { ArrowRight } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue'
import { DataList, AdDCommodity } from '@/api/manager.js'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import router from '@/router'

const AddForm = reactive({
  goods_name: '',
  goods_price: '',
  discount_price: '',
  goods_num: '',
  goods_colour: '',
  goods_size: '',
  goods_pid: ''
})
const rules = reactive({
  goods_name: [
    { required: true, message: '内容不能为空', trigger: 'blur' }
  ],
  goods_price: [
    { required: true, message: '内容不能为空', trigger: 'blur' }
  ],
  discount_price: [
    { required: true, message: '内容不能为空', trigger: 'blur' }
  ],
  goods_num: [
    { required: true, message: '内容不能为空', trigger: 'blur' }
  ],
  goods_colour: [
    { required: true, message: '内容不能为空', trigger: 'change' },
  ],
  goods_pid: [
    { required: true, message: '内容不能为空', trigger: 'change' },
  ]
})

export default {
  name: 'Commodity',
  components: {
    ArrowRight,
    Plus
  },
  setup () {
    const formSize = ref('default')
    const ruleFormRef = ref()
    let options = ref([])
    const dialogImageUrl = ref('')
    const dialogVisible = ref(false)
    // 点击图片放大
    const handlePictureCardPreview = (uploadFile) => {
      dialogImageUrl.value = uploadFile.url
      dialogVisible.value = true
    }
    // 获取分类列表
    DataList().then(res => {
      options.value = res.data.result
    })
    // 更改分类框的样式
    const cascaderProps = {
      value: 'id',
      label: 'cat_name',
      children: 'dw_fenns'
    }
    // 定义FormData
    let fd = new FormData()
    // 点击加号上传图片到FormData
    const AddImages = (value) => {
      fd.append('img', value.file)
    }
    const AddImagess = (value) => {
      fd.append('goods_imgs', value.file)
    }
    const AddImagesss = (value) => {
      fd.append('goods_img', value.file)
    }
    // 点击上传
    const submitForm = async (formEl) => {
      if (!formEl) return
      await formEl.validate((valid, fields) => {
        if (valid) {
          for (const value in AddForm) {
            fd.append(value, AddForm[value])
          }
          // 上传数据
          AdDCommodity(fd).then(res => {
            ElMessage({
              type: 'success',
              message: res.data.message,
              duration: 800
            })
            // 跳转回去
            router.push('/goods/list')
            // 清除数据
            AddForm.goods_name = ''
            AddForm.goods_price = ''
            AddForm.discount_price = ''
            AddForm.goods_num = ''
            AddForm.goods_colour = ''
            AddForm.goods_size = ''
            AddForm.goods_pid = ''
          }).catch(err => {
            ElMessage({
              message: err.response.data.message,
              type: 'error',
              duration: 800
            })
          })
        } else {
          console.log('error submit!', fields)
        }
      })
    }
    return {
      ArrowRight,
      AddForm,
      formSize,
      ruleFormRef,
      rules,
      submitForm,
      cascaderProps,
      options,
      Plus,
      dialogImageUrl,
      dialogVisible,
      handlePictureCardPreview,
      AddImages,
      AddImagess,
      AddImagesss
    }
  }
}
</script>

<style lang="less" scoped>
.box-card {
  width: 100%;
  margin-top: 20px;
}
.row {
  margin-top: 20px;
}
.ScImg {
  display: inline-block;
  font-size: 14px;
  color: #606266;
  padding: 10px 0;
}
.item {
  margin: 0 auto;
}
</style>